<template>
    <div>
        <el-container>
            <el-aside width="200px">
                <el-menu
                        active-text-color="#ffd04b"
                        background-color="#545c64"
                        class="el-menu-vertical-demo"
                        default-active="2"
                        text-color="#fff"
                        router
                        :collapse="isCollapse"
                >
                    <el-menu-item index="4">
                        <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="25" height="25"/>
                        <span>后台管理系统</span>
                    </el-menu-item>
                    <el-sub-menu v-for="menu in menuList" :index="menu.menuId+''">
                        <template #title>
                            <component class="icons" :is="menu.menuLogo"></component>
                            <span>{{ menu.menuName }}</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item v-for="mm in menu.menus" :index="mm.menuUrl">{{ mm.menuName }}</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>

                </el-menu>
            </el-aside>
            <el-container>
                <el-header>
                    <!-- 左侧 -->
                    <div class="header-left">
                        <component class="icons header-icon" :is="icon" @click="change"></component>
                        <el-breadcrumb :separator-icon="ArrowRight">
                            <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <!-- 右侧 -->
                    <div class="header-right">
                        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
                        <el-menu
                                class="el-menu-header"
                                mode="horizontal"
                                background-color="#545c64"
                                text-color="#fff"
                                active-text-color="#ffd04b">
                            <el-sub-menu index="1">
                                <template #title>用户管理</template>
                                <el-menu-item index="1-1">用户中心</el-menu-item>
                                <el-menu-item index="1-3">退出登录</el-menu-item>
                            </el-sub-menu>
                        </el-menu>
                    </div>


                </el-header>
                <div class="father-main">
                    <el-main>
                        <RouterView/>
                    </el-main>
                </div>

            </el-container>
        </el-container>
    </div>
</template>

<script setup>
    import {ArrowRight} from "@element-plus/icons-vue"
    import {reactive, ref} from "vue";
    import {onMounted} from "vue";
    import axios from '@/api/index.js'
    import {ElMessage} from "element-plus";
    import {jsonToTree} from "../common/util"
    import {useRouter} from "vue-router";

    let menuList = ref([])

    const router = useRouter();

    onMounted(() => {
        axios.post("/menu/list").then(response => {
            if(response.data.code === 200){
                menuList.value = jsonToTree(response.data.data)
            }else{
                ElMessage.error(response.data.message)
                router.push("/")
            }

        })
    })

    // 隐藏显示
    const isCollapse = ref(false)
    const icon = ref("DArrowLeft")


    const change = () => {
        isCollapse.value = isCollapse.value == false ? true : false
        icon.value = icon.value == 'DArrowRight' ? 'DArrowLeft' : 'DArrowRight'
    }
</script>

<style scoped>
    .father-main ::v-deep(.el-main) {
        height: 800px;
        padding: 10px;
        line-height: 20px;
    }

    /* 字体图标 icon */
    .icons {
        height: 1em;
        width: 1em;
        margin: 5px;
    }

    /* 面包屑 */
    .header-left ::v-deep(.el-breadcrumb__inner.is-link) {
        color: #ffffff;
    }

    .header-left ::v-deep(.el-breadcrumb__inner) {
        color: #ffffff;
    }

    .header-left ::v-deep(.el-breadcrumb__inner:hover) {
        color: #ffffff;
    }

    /*隐藏显示*/
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 800px;
    }


    .el-breadcrumb {
        float: left;
        height: 60px;
        line-height: 60px;
        color: #ffffff;
        font-size: 14px;
    }

    .el-header {
        background-color: #545c64;
        color: #ffffff;
        text-align: center;
        line-height: 60px;
    }

    .header-left {
        height: 60px;
        width: 300px;
        float: left;
        display: flex;
    }


    .header-icon {
        width: 1.5em;
        height: 1.5em;
        margin-top: 20px;
    }

    .header-right {
        float: right;
        height: 60px;
        width: 300px;
        display: flex;
        line-height: 60px;
    }

    .el-menu-header {
        height: 61px;
        width: 200px;
    }

    .el-avatar {
        margin-top: 10px;
    }


    /*.el-aside {*/
    /*    background-color: #545c64;*/
    /*    color: #fff;*/
    /*    text-align: center;*/
    /*}*/

    .aside-header {
        line-height: 100px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    .el-container {
        width: 1378px;
        height: 850px;
    }
</style>
